import * as echarts from 'echarts/core';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// @ts-ignore
import { SurfaceChart } from 'echarts-gl/charts';
// @ts-ignore
import { Grid3DComponent } from 'echarts-gl/components';
import { useEffect, useState } from 'react';
import { getPie3D } from '../utils/test3d';

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  SurfaceChart,
  Grid3DComponent,
]);
interface ParkingOrderType {
  dayCharged: number; // 日总收费订单
  dayFree: number; // 日总免费订单
  // dayIng: number; // 日总进行中订单
}

const ParkingIncome = (props: { orders: ParkingOrderType }) => {
  const { orders = { dayCharged: 0, dayFree: 0 } } = props;
  const [box, setBox] = useState<HTMLElement | null>(null);
  useEffect(() => {
    const node = document.getElementById('orders');
    setBox(node);
  }, []);
  if (box !== null) {
    const options = getPie3D(
      [
        {
          name: '收费订单',
          value: orders.dayCharged || 0,
          itemStyle: {
            opacity: 0.8,
            color: '#5e8ec9',
          },
        },

        {
          name: '免费订单',
          value: orders.dayFree || 0,
          itemStyle: {
            opacity: 0.8,
            color: '#41c0c0',
          },
        },
      ],
      2,
    );
    const myChart = echarts.init(box);
    myChart.resize({ height: 200 });
    myChart.setOption(options);
  }
  return <div id="orders" />;
};

export default ParkingIncome;
